<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <!--使用组件 使用slot插槽可以向组件添加各种标签 slot属性内容为name就是替换哪个插槽-->
       <ncp>
           <button slot="1" @click="ziClick">按钮</button>
           <ul slot="2">
               <li>篮球</li>
               <li>足球</li>
               <li>排球</li>
           </ul>
        </ncp>
       <ncp><span slot="3">这是插槽内容</span></ncp>
       <ncp></ncp>
    </div>
    <!--组件模板-->
    <template id="ncp">
        <!--添加根元素-->
        <div>
           <h2>我是一个组件</h2>
           <p>这是一个内容</p>
           <!---添加组件插槽 多个插槽  使用name区分每个插槽-->
           <slot name="1"><button @click="ziClick1">按钮</button></slot>
           <slot name="2"><button @click="ziClick1">按钮</button></slot>
           <slot name="3"><button @click="ziClick1">按钮</button></slot>
           <slot name="4"><button @click="ziClick1">按钮</button></slot>
        </div>
    </template>
    <script>
        var app=new Vue({
             el:'#app',
             methods:{
                        ziClick:function(){
                            console.log("组件插槽click");
                        }
                    },
             //创建注册组件,可以创建多个子组件
             components:{
                 ncp:{
                    template:'#ncp',
                    data:function(){
                        return {
                            message:'我是组件'
                        }
                    },
                    methods:{
                        ziClick1:function(){
                            console.log("组件插槽click11");
                        }
                    }
                 }
             }
    
        });
    </script>
</body>
</html>